<template>

  <div class="topPart">
<!--    导航栏-->
    <div>
      <public-nav-bar></public-nav-bar>
<!--      <index-nav-bar></index-nav-bar>-->
    </div>

<!--    搜索部分-->
    <div>
      <index-search class="indexSearch"></index-search>
    </div>

    <div style="margin-top: 5%"><el-container></el-container></div>
  </div>

  <div class="bot-semicircle"></div>

  <div class="mainBackground">
    <div class="mainContent">
      <index-main-content></index-main-content>
    </div>
  </div>




</template>

<script>
import IndexNavBar from "@/index/components/IndexNavBar";
import IndexSearch from "@/index/components/IndexSearch";
import IndexMainContent from "@/index/views/IndexMainContent";
import PublicNavBar from  '@/components/PublicNavBar'
// ref: https://www.tandfonline.com
export default {
  name: "Index",
  components: {
    IndexMainContent,
    IndexSearch,
    IndexNavBar,
    PublicNavBar
  },
  mounted() {
  }
}
</script>

<style scoped>
  .indexSearch {
    margin-top: 3%;
  }

  .topPart {
    background-image: url('../assets/indexBackground.jpg');
  }

  .mainContent {
    margin-top: 3%;
    margin-left: 15%;
    margin-right: 20%;

  }

  .mainBackground {
    background: linear-gradient(white, #3a3a8c);

  }

  .bot-semicircle {
    margin-left: 44.5%;
    position: center;
    align-self: center;
    width: 120px;
    height: 60px;
    background: linear-gradient(to left bottom, #bac3cf, #c3c7d2);
    border-radius: 0 0 60px 60px;
  }


</style>